<template>
  <div style="height:100%;">
    <view-box ref="viewBox" body-padding-bottom="50px">
      <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
        <keep-alive>
          <router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
        <router-view class="router-view" v-if="!$route.meta.keepAlive"></router-view>
      </transition>
      <tabbar slot="bottom">
        <tabbar-item link="/">
          <span class="demo-icon-22 vux-demo-tabbar-icon-home" slot="icon" style="position:relative;">&#xe6b8;</span>
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item link="/coach">
          <span class="demo-icon-22" slot="icon">&#xe682;</span>
          <span slot="label">教练员</span>
        </tabbar-item>
        <tabbar-item link="/course">
          <span class="demo-icon-22" slot="icon">&#xe6af;</span>
          <span slot="label">在线报名</span>
        </tabbar-item>
        <tabbar-item selected link="/article/view/4">
          <span class="demo-icon-22" slot="icon">&#xe6b7;</span>
          <span slot="label">联系我们</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
import { ViewBox, Tabbar, TabbarItem, XHeader, TransferDom } from 'vux'
import { mapState } from 'vuex'

export default {
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    ViewBox,
    Tabbar,
    TabbarItem
  },
  name: 'app',
  data () {
    return {
    }
  },
  computed: {
    ...mapState([
      'direction'
    ])
  },
  methods: {
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';
body {
  background-color: #fbf9fe;
}
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.demo-icon-22 {
  font-family: 'vux-demo';
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #F70968;
}
.vux-demo-tabbar .weui-tabbar_item.weui-bar__item_on .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #F70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0!important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
@font-face {
  font-family: 'vux-demo';  /* project id 403491 */
  src: url('//at.alicdn.com/t/font_403491_ppnoa5v0hn7e3ik9.eot');
  src: url('//at.alicdn.com/t/font_403491_ppnoa5v0hn7e3ik9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_403491_ppnoa5v0hn7e3ik9.woff') format('woff'),
  url('//at.alicdn.com/t/font_403491_ppnoa5v0hn7e3ik9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_403491_ppnoa5v0hn7e3ik9.svg#iconfont') format('svg');
}
.demo-icon {
  font-family: 'vux-demo';
  font-size: 20px;
  color: #04BE02;
}
.demo-icon-big {
  font-size: 28px;
}
.demo-icon:before {
  content: attr(icon);
}
.router-view {
  width: 100%;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}
</style>
